<template>
  <div
    class="affirm"
    :style="{
      'margin-top': top,
      'padding-left': spacing,
      'padding-right': spacing,
      'background-color': bgcolor,
      'background-image': `url(${imgBg})`,
      'background-repeat': 'no-repeat',
      'background-size': '100% 100%',
      'background-position': 'top center',
    }"
  >
    <div
      class="affirm_content"
      :style="{
        height
      }"
    >
      <div
        class="affirm_content_left"
        :style="{
          'width': affirmWidth,
          'height': affirmHeight,
          'border-radius': affirmBorderRadio,
          'background-color': bgcolorAffirm,
          'background-image': `url(${imgBgAffirm})`,
          'background-repeat': 'no-repeat',
          'background-size': '100% 100%',
          'background-position': 'top center',
        }"
      >
        <span>剩余点赞次数：<span style="color: red">20</span></span>
      </div>
      <div class="affirm_content_right">
        <span
          :style="{
            'color': affirmNumColor
          }"
        >26666</span>
        <img src="./image/affirm.png" alt="" class="righ_img">
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '../mixins'
export default {
  name: 'Affirm',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
    affirmWidth() {
      return this.px2rem(this.option.affirmWidth || 300)
    },
    affirmHeight() {
      return this.px2rem(this.option.affirmHeight || 70)
    },
    affirmBorderRadio() {
      return this.px2rem(this.option.affirmBorderRadio || 0)
    },
    // 背景颜色
    bgcolor() {
      return this.option.bgcolor
    },
    // 背景图片
    imgBg() {
      return this.option.imgBg
    },
    // 剩余点赞次数背景图片
    imgBgAffirm() {
      return this.option.imgBgAffirm
    },
    // 剩余点赞次数背景颜色
    bgcolorAffirm() {
      return this.option.bgcolorAffirm
    },
    // 点赞数量字体颜色
    affirmNumColor() {
      return this.option.affirmNumColor || 'rgba(255, 0, 0, 1)'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.affirm {
  .affirm_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .affirm_content_left {
      // width: rem(400);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #999;
    }
    .affirm_content_right {
      .righ_img {
        width: rem(30);
        height: rem(30);
      }
    }
  }
}
</style>
